<script setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: false,
    default (){
      return {
        title: '气动固定式球阀',
        infor: '致力于为各种行业提供创新的工业解决方案，是工业控制、自动化、制程管理以及流体控制领域的领先企业。致力于为各种行业提供创新的工业解决方案，是工业控制、自动化、制程管理以及流体控制领域的领先企业。致力于为各种行业提供创新的工业解决方案，是工业控制、自动化、制程管理以及流体控制领域的领先企业。',
        url: '/news/detail'
      }
    }
  }
})



const count = ref(0)
</script>

<template>
    <div class="w-full h-full flex mobile:px-6">
        <img class="absolute w-full h-full left-0" src="../assets/barpi96_5.jpg" alt="" srcset="">
        <div class="w-full h-full justify-self-center flex mobile:block relative z-10 mobile:pt-20  wen-mobile-down">
          <div class="w-full h-fit z-10 self-center wow animate__animated animate__fadeInUp timing">
            <h3 class="text-4xl py-1 font-medium mobile:text-2xl mb-8 mobile:mb-6"><a :href="data.url">{{ data.title }}</a></h3>
            <p class="text-lg mobile:text-base leading-loose"><a :href="data.url">{{ data.infor }}</a></p>
            <div class="w-full mt-24 mobile:hidden leading-loose"><a :href="data.url"><span class="w-12 h-12 mobile:w-10 mobile:h-10 p-2 mobile:p-1 text-center mr-3 inline-block rounded-full bg-dominant text-white"><span class="fa fa-angle-down fa-2x mobile:fa-lg"></span></span><span class="text-2xl text-tblack mobile:text-xl mobile:leading-loose">查看详细产品参数</span></a></div>
          </div>
          <div class="w-full h-fit text-white z-10 self-center">
            <img class="w-2/3 mobile:w-full float-right mobile:mx-auto mobile:float-none duration-500 hover:scale-110" src="/src/assets/WX20240324-021156@2x 1.png" alt="">
          </div>
          <div class="ilmobile:hidden text-center w-full leading-loose text-gray3">
            查看详细产品参数
          </div>
        </div>
    </div>
</template>

<style scoped>
</style>
